<template>
  <div class="move-container">
    <div class="content">
      <button @click="showModalRef = true">打开蒙尘</button>
      <!-- 将指定元素插入指定位置，to：class选择器 -->
      <teleport to="#app">
        <MyModal v-if="showModalRef">
          <button @click="showModalRef = false">关闭蒙尘</button>
        </MyModal>
      </teleport>
    </div>
    <div class="content">内容2</div>
    <div class="content"><ContentThree /></div>
    <div class="content">内容4</div>
    <div class="content"><ContentFive /></div>
    <div class="content">内容6</div>
  </div>
</template>

<script>
import { asyncComponent } from '../utils/publicApi.js'
// import { defineAsyncComponent, h } from 'vue'
// import Loading from '../components/Loading.vue'
// import ErrorCom from '../components/ErrorCom.vue'
// const ContentThree = defineAsyncComponent({
//   loader: async () => {
//     await delay()
//     if (Math.random() < 0.7) {
//       return import('../components/ContentThree.vue')
//     }
//     throw Error('组件加载失败')
//   },
//   loadingComponent: Loading,
//   errorComponent:{
//     render(){
//       return h(ErrorCom,'失败')
//     }
//   },
// })
const ContentThree = asyncComponent('../components/ContentThree.vue')
const ContentFive = asyncComponent('../components/ContentFive.vue')
import MyModal from '../components/Modal.vue'
import { ref } from 'vue'
export default {
  components: {
    ContentThree,
    ContentFive,
    MyModal,
  },
  setup() {
    let showModalRef = ref(false);
    return {
      showModalRef
    }
  },
}
</script>

<style scoped>
.move-container {
  height: 500px;
  border: 1px solid;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
.move-container .content {
  width: 150px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
}
</style>